1.1-next 概述

Create by fall on 25 Aug 2023
Recently revised in 17 Jul 2025

学习前提

html、css、js
react
对 nodejs 了解

服务端渲染

服务端渲染（SSR），在服务端渲染完成后，然后将 html（有 DOM 结构）返回给客户端

SSG：静态页面生成，会直接生成 HTML 文件，适用营销页面、博客文章、电子商务产品列表、帮助和文档等场景。

详情可看：服务端渲染

初始化项目

npx create-next-app@latest

根据选项，选择对应的依赖，进行安装。

内置功能

内置 eslint，使用 next lint 命令即可调用内置代码检查功能

内置 path、baseUrl 功能

// 之前
import { Button } from '../../../components/button'
// 之后，两者邓建
import { Button } from '@/components/button'

可以通过更改 tsconfig.json 或者 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/" // @ 对应的路径
  }
}

项目结构

顶层文件结构分为两种，选择你喜欢的文件结构即可

- app
- pages
- public
或者
- src
	- app
	- pages
public

顶层文件

next.config.js：next 的配置
instrumentation.ts：OpenTelemetry and Instrumentation file
middleware.ts：next 请求中间件
.env：环境变量，通过 process.env.DB_HOST 获取
next-env.d.ts：nextjs 所需的 TypeScript 类型定义

路由文件

layout 布局
page 页面
loading 加载页面
not-found 找不到该页面
error 错误 UI
global-error 全局错误
route API 终结点
template 重渲染布局

路由文件夹

[folder] 动态路由
[...folder] 捕获所有动态路由
[[...folder\]] 选择捕获所有
_folder 将所有在暖色从路由中排除
(folder) 在不影响路由的情况下组合路由

SEO 优化

sitemap.xml、sitemap.js 网站地图
robots.txt、robots.js 爬虫指引文件

next 不限制你如何组织和安排你的项目文件，但是会内容帮助你组织你的应用，

默认包裹方式为 Layout => Template => ErrorBoundary => Suspense =>ErrorBoundary => Page

如果存在子路由，子路由会嵌套在所有父路由内

路由方式

路由方式一：使用 src/app

路由方式二：使用 src/pages 根据项目路径路由划分应用路由（以 _App.tsx 开头的文件会被忽略）

尽管可以同时使用两种路由方式，但是为了避免冲突，还是应该就尽量保证只使用一个

官方建议使用 src/app，也就是 App Router，能应用到更多 React 的新特性

文件资源

会将 png 等内容放置在 /public 目录下面，在项目内部调用的时候，可以直接使用 / 进行调用（例如：/image.jpg）

样式处理

采用默认选项时，会提供 tailwindcss 进行 css 处理，也提供了 styled-jsx

<div>
  <div className="demo">test</div>
  <style jsx>{`
    .demo {
        color: red;
    }
 `}
  </style>
</div>

以及 xx.module.css

// index.module.scss
body {
  background: red;
}

import styles from './index.module.css';
<div className={styles.p}>test</div>

SSG 处理

使用 getStaticProps 方法，可以获取到渲染静态页面时需要的数据，getStaticProps 这个方法是构建的时候运行的，因此可以访问文件和数据库。

import Head from 'next/head';
import styles from './list.moduls.css'

// 导出一个异步函数
export async function getStaticProps() {
  // 从文件系统，API，数据库中获取数据
  const data = '...'
  // props属性的值将会传递给组件
  return {
    props: '...' // 返回的数据
  }
}

export default function List(props) {
  // props中获取到getStaticProps中返回的props
  rteurn (<>
    <Head>
    <title>Index Page</title>
  </Head>
  <div className={styles.demo}>test</div>
  </>)
}

参考文章

作者	文章名称
隐冬	Next.js上手指南

Next​

服务端渲染​

初始化项目​

内置功能​

项目结构​

路由方式​

文件资源​

样式处理​

SSG 处理​

参考文章​

Next